<template>
  <div>
    <van-nav-bar title="报警"
                 left-text="返回"
                 left-arrow
                 @click-left="onClickLeft" />
    <div class="alarm">
      <div class="alarmDetail-title">告警详情</div>
      <van-cell-group>
        <van-cell title="告警类别">
          <span :style="{'color': alarmTypeColor}">{{alarmTypeTxt}}</span>
        </van-cell>
        <van-cell title="告警时间"
                  :value="alarmInfo.alarmTime" />
        <van-cell title="告警内容"
                  :value="alarmInfo.alarmDetail" />
        <van-cell title="告警状态">
          <span :style="{'color':alarmStatColor}">{{alarmStatTxt}}</span>
        </van-cell>
      </van-cell-group>

      <div class="alarmDetail-title">告警处理</div>
      <van-cell-group>
        <van-cell title="确认类型"
                  is-link
                  @click="dealTypeActionChoose">{{dealTypeTxt}}</van-cell>
        <van-cell title="确认方式"
                  is-link
                  @click="dealMethodActionChoose">{{dealMethodTxt}}</van-cell>
        <van-cell v-if="alarmInfo.alarmType==2"
                  title="火灾原因"
                  is-link
                  @click="fireReasonActionChoose">{{fireReasonTxt}}</van-cell>
        <van-field v-model="alarmInfo.dealResult"
                   type="textarea"
                   label="处理结果"
                   placeholder="请输入处理结果" />
        <div class="operaiton-button">
          <van-button size="large"
                      type="primary"
                      :disabled="disabled"
                      :loading="isLoading"
                      @click="relieveAlarm">{{alarmInfo.alarmType==2?'消音':'确认'}}</van-button>
        </div>
      </van-cell-group>

      <div class="alarmDetail-title">商铺</div>
      <van-cell-group>
        <van-cell title="商铺名称"
                  :value="alarmInfo.shopName" />
        <van-cell title="主要联系人"
                  :value="alarmInfo.managerName" />
        <van-cell title="手机号"
                  :value="alarmInfo.managerMobile" />
      </van-cell-group>
      <div class="alarmDetail-title">设备信息</div>
      <van-cell-group>
        <van-cell title="设备名称"
                  :value="alarmInfo.devName" />
        <van-cell title="IMEI"
                  :value="alarmInfo.imei" />
        <van-cell title="安装地址"
                  :value="alarmInfo.installAddr" />
      </van-cell-group>
      <van-actionsheet v-model="dealTypeComboShow"
                       :actions="dealTypeCombo"
                       @select="onSelectDealType"
                       cancel-text="取消" />
      <van-actionsheet v-model="dealMethodComboShow"
                       :actions="dealMethodCombo"
                       @select="onSelectDealMethod"
                       cancel-text="取消" />
      <van-actionsheet v-model="fireReasonComboShow"
                       :actions="fireReasonCombo"
                       @select="onSelectFireReason"
                       cancel-text="取消" />
    </div>
  </div>
</template>

<script>
import { mediaURL } from '@/config'
import wx from 'weixin-js-sdk'
import { relieveAlarm } from './../../api/alarm'
export default {
  data() {
    return {
      dealTypeComboShow: false,
      dealMethodComboShow: false,
      fireReasonComboShow: false,
      isLoading: false,
      alarmInfo: {},
      dealTypeCombo: [
        { key: 1, name: '真实火警' },
        { key: 2, name: '误报' },
        { key: 3, name: '故障' },
        { key: 4, name: '测试' }
      ],
      dealMethodCombo: [
        { key: 1, name: '电话确认' },
        { key: 2, name: '视频确认' },
        { key: 3, name: 'app图片确认' },
        { key: 4, name: '自动确认' },
        { key: 5, name: '其他方式' }
      ],
      alarmTypeCombo: [
        { key: 0, value: '告警类型' },
        { key: 1, value: '离线' },
        { key: 2, value: '火警' },
        { key: 3, value: '传感器故障' },
        { key: 4, value: '拆除报警' },
        { key: 5, value: '低压报警' },
        { key: 6, value: '火警解除' },
        { key: 99, value: '未知' }
      ],
      alarmTypeColorList: [
        { key: 1, value: '#f16700' },
        { key: 2, value: '#e4393c' },
        { key: 3, value: '#00b711' },
        { key: 4, value: '#d3adf7' },
        { key: 5, value: '#495060' }
      ],
      alarmStatCombo: [
        { key: 0, value: '确认状态' },
        { key: 1, value: '未确认' },
        { key: 2, value: '已确认' }
      ],
      alarmStatColorList: [
        { key: 1, value: '#f54d50' },
        { key: 2, value: '#5cb85c' }
      ],
      fireReasonCombo: [
        {
          key: '1',
          name: '明火走火'
        },
        {
          key: '2',
          name: '漏电'
        },
        {
          key: '3',
          name: '自燃'
        },
        {
          key: '4',
          name: '人为纵火'
        },
        {
          key: '5',
          name: '易燃易爆物品燃爆'
        },
        {
          key: '6',
          name: '用电负荷超载'
        },
        {
          key: '7',
          name: '雷击'
        },
        {
          key: '8',
          name: '生活用火不慎'
        },
        {
          key: '9',
          name: '生产作业不慎'
        }
      ]
    }
  },
  computed: {
    disabled: function() {
      if (this.alarmInfo.alarmStat === 1) {
        //未确认状态
        if (this.alarmInfo.dealType && this.alarmInfo.dealMethod) {
          return false
        } else {
          return true
        }
      } else {
        return true
      }
    },
    alarmStatTxt: function() {
      if (this.alarmInfo.alarmStat) {
        let alarmStat = this.alarmInfo.alarmStat
        return this.alarmStatCombo.find(a => a.key == alarmStat).value
      } else {
        return ''
      }
    },
    alarmStatColor: function() {
      if (this.alarmInfo.alarmStat) {
        let alarmStat = this.alarmInfo.alarmStat
        return this.alarmStatColorList.find(a => a.key == alarmStat).value
      } else {
        return '#666'
      }
    },
    alarmTypeTxt: function() {
      if (this.alarmInfo.alarmStat) {
        let alarmType = this.alarmInfo.alarmType
        return this.alarmTypeCombo.find(a => a.key == alarmType).value
      } else {
        return ''
      }
    },
    alarmTypeColor: function() {
      if (this.alarmInfo.alarmStat) {
        let alarmType = this.alarmInfo.alarmType
        return this.alarmTypeColorList.find(a => a.key == alarmType).value
      } else {
        return '#666'
      }
    },
    dealTypeTxt: function() {
      if (this.alarmInfo.dealType) {
        let dealType = this.alarmInfo.dealType
        return this.dealTypeCombo.find(a => a.key == dealType).name
      } else {
        return '请选择确认类型'
      }
    },
    dealMethodTxt: function() {
      if (this.alarmInfo.dealMethod) {
        let dealMethod = this.alarmInfo.dealMethod
        return this.dealMethodCombo.find(a => a.key == dealMethod).name
      } else {
        return '请选择确认方式'
      }
    },
    fireReasonTxt: function() {
      if (this.alarmInfo.alarmReason) {
        let fireReason = this.alarmInfo.alarmReason
        return this.fireReasonCombo.find(a => a.key == fireReason).name
      } else {
        return '请选择火灾原因'
      }
    }
  },
  watch: {},

  created() {},
  mounted() {
    this.alarmInfo = this.$route.query
    console.log(this.alarmInfo)
    document.body.addEventListener('focusout', () => {
      //软键盘收起的事件处理
      let ua = navigator.userAgent.toLowerCase()
      if (ua.indexOf('iphone') > 0 || ua.indexOf('ipad') > 0) {
        //键盘收齐页面空白问题
        document.body.scrollTop = document.body.scrollHeight
      }
    })
  },
  activated() {},

  deactivated() {},

  methods: {
    dealTypeActionChoose() {
      if (this.alarmInfo.alarmStat === 1) {
        this.dealTypeComboShow = true
      }
    },
    dealMethodActionChoose() {
      if (this.alarmInfo.alarmStat === 1) {
        this.dealMethodComboShow = true
      }
    },
    fireReasonActionChoose() {
      if (this.alarmInfo.alarmStat === 1) {
        this.fireReasonComboShow = true
      }
    },
    onSelectDealType(item) {
      this.dealTypeComboShow = false
      this.alarmInfo.dealType = item.key
    },
    onSelectDealMethod(item) {
      this.dealMethodComboShow = false
      this.alarmInfo.dealMethod = item.key
    },
    onSelectFireReason(item) {
      this.fireReasonComboShow = false
      this.alarmInfo.alarmReason = item.key
    },
    async relieveAlarm() {
      this.isLoading = true
      let params = {
        alarmId: this.alarmInfo.alarmId,
        dealMethod: this.alarmInfo.dealMethod,
        dealType: this.alarmInfo.dealType,
        alarmReason: this.alarmInfo.alarmReason,
        dealResult: this.alarmInfo.dealResult
      }
      let res = await relieveAlarm(params)
      if (res.code === 0) {
        this.$toast.success('提交成功')
        this.$router.replace('/alarm')
      } else {
        this.$toast.fail(res.msg)
      }
      this.isLoading = false
    },
    onClickLeft() {
      this.$router.go(-1)
    }
  }
}
</script>


<style lang="scss" scoped>
@import './../../../../assets/scss/mixin';
.alarmDetail-title {
  margin: 0;
  font-weight: 400;
  font-size: 14px;
  color: rgba(69, 90, 100, 0.6);
  padding: 20px 15px 15px;
}
.van-cell__value {
  margin-right: 16px;
}
</style>
